<script setup>
import { User, Calendar, Wallet,OfficeBuilding,School,Postcard ,PriceTag, Plus } from '@element-plus/icons-vue'
import Visitor from './modules/Visitor.vue'
import { computed,onMounted, ref } from 'vue'
import { getPatientAPI, addPatientAPI } from '@/api/user.js'
import { getDoctorInfoAPI, submitRegistrationAPI} from '@/api/hospital'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage }from 'element-plus'

// 页面路有对象
const route = useRoute()

// 全局路由对象
const router = useRouter()

// 确认挂号按钮状态
const isDisabled = ref(true)

// 就诊人数就员信息
const patientList = ref([])

// 获取就诊人信息
const getPatient = async () => {
    const res = await getPatientAPI();
    patientList.value = res.data
}

// 初始化调用
onMounted(() => {
    getPatient()
    getDoctorInfo()
})

// 排班医生数据
const doctorInfo = ref([])

// 获取排班医生数据
const getDoctorInfo  = async () => {
    const res = await getDoctorInfoAPI(route.query.id)
    doctorInfo.value = res.data
}

// 选择的用户信息
const selectedPatientId = ref('')

// 选择就诊人
const selectPatient = (item) => {
    selectedPatientId.value = item.id
    isDisabled.value = false
}

// 确认挂号
const confirmRegistration = async () => {
    loading.value = true
    // 调用挂号接口
    const res =   await submitRegistrationAPI(doctorInfo.value.hoscode,doctorInfo.value.id, selectedPatientId.value)
    loading.value = false
    ElMessage.success('挂号成功')
    // 跳转订单页面
    router.push({path: '/user/order-detail', query: {orderId: res.data}})
}

// 添加就诊人
const addPatient = async () => {
    console.log(route.query);
    router.push({
        path: '/user/patient-add',
        query: {
            fullPath: route.fullPath
        }
    })
}
// 按钮加载
const loading = ref(false)
</script>
<template>
    <div class="container">
        <h1 class="tip">确认挂号信息</h1>
        <el-card >
            <template #header>
            <div class="card-header">
                <span>请选择就诊人</span>
                <el-button  type="primary" :icon="Plus" size="default" style="margin-right: 20px;" @click="addPatient ">添加就诊人</el-button>
            </div>
            </template>
            <div class="user">
                <Visitor @click="selectPatient(item)" :class="{active: item.id === selectedPatientId}"  class="item " v-for="item in patientList" :key="item.id" :data="item"></Visitor>
            </div>
            
        </el-card>
        <el-card style="width: 100%;" class="footer">
            <template #header>
            <div class="card-header">
                <span>挂号信息</span>
            </div>
            </template>
            <el-descriptions
                class="margin-top"
                :column="2"
                :size="size"
                border
                v-if="doctorInfo.id"
            >
                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle"><Calendar /></el-icon>
                    就诊日期：
                    </div>
                </template>
                {{doctorInfo.workDate + ' ' + doctorInfo.param.dayOfWeek}}
                </el-descriptions-item>

                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    <el-icon :style="iconStyle"><OfficeBuilding /></el-icon>
                    就诊医院：
                    </div>
                </template>
                {{ doctorInfo.param.hosname }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle"><School /></el-icon>
                    就诊科室：
                    </div>
                </template>
                {{ doctorInfo.param.depname}}
                </el-descriptions-item>

                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle"><User /></el-icon>
                    医生姓名：
                    </div>
                </template>
                {{ doctorInfo.docname }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle"><Postcard /></el-icon>
                    医生职称：
                    </div>
                </template>
                {{ doctorInfo.title }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle"> <PriceTag /></el-icon>
                    医生专长：
                    </div>
                </template>
                {{doctorInfo.skill  }}
                </el-descriptions-item>
                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    <el-icon :style="iconStyle"><Wallet /></el-icon>
                    医事服务费
                    </div>
                </template>
               <span style="color: red; font-size: 18px; font-weight: 700;">{{ doctorInfo.amount }}</span>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <div class="button">
            <el-button v-loading="loading" @click="confirmRegistration" :disabled="isDisabled" type="primary" size="large">确认挂号</el-button>
        </div>
    </div>
</template>



<style lang="scss" scoped>
.container {
    margin-left: 50px;
    width: 1000px;
    .tip {
        font-weight: 900;
        color: #7f7f7f;
        font-size: 20px;
    }
    .el-card {
        width: 100%;
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .user {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            
           
            .item {
                width: 30%;
                margin: 18px 14px;
                border-radius: 10px;
                transition: all .2s;
                cursor: pointer;
                position: relative;
                &::after {
                    content: '已选择';
                    width: 200px;
                    height: 200px;
                    position: absolute;
                    // background-color: red;
                    border-radius: 50%;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%) rotate(35deg);
                    color: red;
                    font-size: 30px;
                    border: 1px dashed red;
                    text-align: center;
                    line-height: 200px;
                    opacity: 0;
                    font-weight: 700;
                }
                &.active {
                    
                border: 1px solid rgb( 55,153,255);
                transform: scale(1.05);
                &::after {
                    opacity: 0.3;
                }
               

                }

            }
            
        }
    }
    .footer {
        margin-top: 20px;
        .card-header {
            padding: 10px 0;
            font-size: 20px;
        }
    }
    .button {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 40px;
        .el-button {
            width: 200px;
            height: 45px;
        }
    }
}
</style>